<!--
 * @Descripttion: 应用管理-新建
 * @Author: 颜博骏 bojun@ssc-hn.com
 * @Date: 2024-04-11
 * @LastEditors: 颜博骏 bojun@ssc-hn.com
 * @LastEditTime: 2024-06-21
-->
<script lang="ts" setup>
  import { ArrowLeftOutlined } from '@ant-design/icons-vue'
  import { message } from 'ant-design-vue'
  import type { Rule } from 'ant-design-vue/es/form'
  import { onMounted, ref } from 'vue'
  import { useRouter } from 'vue-router'

  import { requestAddChannel, requestAddSubChannel, requestEditChannel, requestGetEditInfo } from '/@/api/business/tracecode/channel/index'
  import { HttpCodeEnum } from '/@/enums/httpEnum'

  const router = useRouter()

  const formRef = ref()
  const formState = ref({
    channelName: '',
    account: '',
    password: '',
    createFlag: 1,
    seniorId: 0,
    notes: '',
  })
  const isTop = ref('')
  const seniorName = ref('')
  const PageType = ref('')
  const PageCode = ref(1)
  const labelCol = { style: { width: '200px' } }
  const spinning = ref<boolean>(false)

  /** 自定义校验规则 */
  const rules: Record<string, Rule[]> = {
    channelName: [
      { required: true, message: '请输入渠道名称' },
      { max: 20, message: '最多不能超过20个字符' },
    ],
    account: [
      { required: true, message: '请输入账号' },
      { min: 6, message: '最少不能少于6个字符' },
      { max: 20, message: '最多不能超过20个字符' },
    ],
    password: [{ required: true, message: '请输入密码' }],
    createFlag: [{ required: true }],
  }

  const confirm = () => {
    formRef.value
      .validate()
      .then(async () => {
        spinning.value = true
        // 编辑：0；一级新建：1；其他新建：2
        const type = router.currentRoute.value.query.pageType as any

        if (type == '1') {
          const params = { ...formState.value, seniorId: null }
          const { responseCode } = await requestAddChannel(params)
          spinning.value = false
          if (responseCode === HttpCodeEnum.SUCCESS) {
            message.success(`一级渠道创建成功`)
            router.back()
          }
        } else if (type == '2') {
          const params = { ...formState.value }
          const { responseCode } = await requestAddSubChannel(params)
          spinning.value = false
          if (responseCode === HttpCodeEnum.SUCCESS) {
            message.success(`渠道创建成功`)
            router.back()
          }
        } else {
          const channelId = router.currentRoute.value.query.channelId as any
          const { notes, channelName, createFlag } = formState.value
          const params = { notes, channelName, createFlag, channelId }
          const { responseCode } = await requestEditChannel(params)
          spinning.value = false
          if (responseCode === HttpCodeEnum.SUCCESS) {
            message.success(`渠道修改成功`)
            router.back()
          }
        }
      })
      .catch((res) => {
        console.log('catch: ', res)
      })
  }

  const pageType = (type: number) => {
    PageCode.value = type
    if (type == 0) {
      PageType.value = '编辑'
    } else if (type == 1) {
      PageType.value = '新建一级'
    } else {
      PageType.value = '新建'
      const channelName = router.currentRoute.value.query.channelName as any
      const channelId = router.currentRoute.value.query.channelId as any
      formState.value.seniorId = Number(channelId)
      seniorName.value = channelName
    }
  }

  /** 编辑回显 */
  const onEditInfo = async (channelId: number) => {
    const { responseCode, responseData } = await requestGetEditInfo({ channelId })
    spinning.value = false
    if (responseCode === HttpCodeEnum.SUCCESS) {
      formState.value = { ...responseData, password: '******' }
      seniorName.value = responseData.seniorName
    }
  }

  onMounted(() => {
    const type = router.currentRoute.value.query.pageType as any
    pageType(type)

    //编辑页
    if (type == 0) {
      const channelId = router.currentRoute.value.query.channelId as any
      const topValue = router.currentRoute.value.query.istop as any
      isTop.value = topValue
      onEditInfo(channelId)
    }
  })
</script>

<template>
  <div class="apply-list-add">
    <div class="add-header">
      <arrow-left-outlined :style="{ 'font-weight': 'bold', 'margin-right': '18px' }" @click="router.back()" />
      <span>{{ `${PageType}渠道` }}</span>
    </div>
    <a-divider />
    <a-spin :spinning="spinning">
      <div class="add-form-box">
        <div class="add-title">
          <span class="title">渠道信息</span>
        </div>
        <div class="add-content">
          <a-form :model="formState" :rules="rules" layout="horizontal" ref="formRef" name="add_form" labelAlign="right" :label-col="labelCol">
            <a-form-item label="渠道名称" name="channelName">
              <a-input v-model:value="formState.channelName" allow-clear />
            </a-form-item>
            <a-form-item label="渠道管理员账号" name="account">
              <a-input v-model:value="formState.account" allow-clear :disabled="PageCode == 0" />
            </a-form-item>
            <a-form-item label="渠道密码" name="password">
              <a-input-password v-model:value="formState.password" :disabled="PageCode == 0" />
            </a-form-item>
            <a-form-item label="是否允许创建下级渠道" name="createFlag">
              <a-radio-group v-model:value="formState.createFlag">
                <a-radio :value="1">允许</a-radio>
                <a-radio :value="2">不允许</a-radio>
              </a-radio-group>
            </a-form-item>
            <a-form-item label="上级渠道" name="seniorId" v-if="PageCode == 2 || isTop === '0'">
              <a-input v-model:value="seniorName" allow-clear disabled />
            </a-form-item>
            <a-form-item label="备注" name="notes">
              <a-textarea :rows="4" v-model:value="formState.notes" allow-clear :maxlength="300" />
            </a-form-item>
          </a-form>
        </div>
        <div class="btn-wrap">
          <a-space>
            <a-button type="primary" html-type="submit" @click="confirm">确认</a-button>
            <a-button type="default" html-type="submit" @click="router.back()">取消</a-button>
          </a-space>
        </div>
      </div></a-spin
    >
  </div>
</template>

<style lang="less" scoped>
  .apply-list-add {
    background: #fff;
    padding-bottom: 32px;

    .add-header {
      font-size: 18px;
      font-weight: 500;
      color: #000;
      padding: 22px 0 0 26px;
    }

    .add-form-box {
      width: 80%;
      margin: 24px auto;

      .add-title {
        margin-bottom: 24px;
        clear: both;

        &::before {
          content: '';
          width: 3px;
          height: 13px;
          display: inline-block;
          background: #13c2c2;
          margin-right: 3px;
        }

        .title {
          font-size: 16px;
          font-weight: 500;
          color: #00474f;

          &::before {
            content: '';
            width: 2px;
            height: 10px;
            display: inline-block;
            background: #13c2c2;
            margin-right: 8px;
          }
        }
      }
    }
  }
</style>
